<template>
	<view>
    <u-toast ref="uToast" :icon="false" />
    <view class="privacy-box">
      <view class="texts">
        <view class="bg" @click="checkEdFun">
          <view class="icon" :class="{on: checkEd}">
            <template v-if="checkEd">✔</template>
          </view>
          您已阅读并同意</view>
      </view>
      <text class="t" @click="showFun(1)">《隐私协议》</text>和<text class="t" @click="showFun(2)">《用户协议》</text>
    </view>
    <!-- <u-popup v-model="show" :popup="false" @close="close" mode="center" :closeable="true" border-radius="30">
      
      
    </u-popup> -->
    <view v-if="show" class="pup-box">
      <view class="pup">
        <view @click="show = !show" class="close"><u-icon name="close" color="#666666" ></u-icon></u-icon>
        </view>
        <view class="div">
          <u-parse v-if="type === 1" :html="privacyHtml"></u-parse>
          <u-parse v-if="type === 2" :html="agreementHtml"></u-parse>
        </view>
        <view class="btns">
          <view class="btn" hover-class="none" size="medium" @click="no">不同意</view>
          <view class="btn btn1" hover-class="none" size="medium"  type="primary" @click="ok">同意</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		name: 'u-badge',
		props: {
			
			isCenter: {
				type: Boolean,
				default: false
			}
		},
    data() {
    	return {
    		show: false,
    		privacyHtml: '',
        agreementHtml:'',
        type:1, // , 1-隐私协议 2-用户协议
        tony:0,
        agreementOk:false,
        privacyOk:false,
        checkEd:false
        
    	};
    },
    
    created() {
      this.$api.userAgreementApi().then(res=>{
        console.log('11111', res)
        this.agreementHtml = res.data
      })
      this.$api.privacyApi().then(res=>{
        this.privacyHtml = res.data
      })
    },
    watch:{
      checkEd(newVal, oldVal) {
      console.log('新的值：' + newVal + ', 旧的值：' + oldVal);
      }
    },
    methods:{
      backCheck(e){
        console.log('sadasd', e)
      },
      showFun(e){
        this.type = e;
        this.show = true;
      },
      close(){
        this.show = false
      },
      ok(){
        if(this.type === 2){
          this.agreementOk = true
        }else{
          this.privacyOk = true;
        }
        this.show=false
      },
      no(){
        if(this.type === 2){
          this.agreementOk = false  
        }else{
          this.privacyOk = false;
        }
        this.show=false
      },
      checkEdFun(){
        if(this.checkEd){
          this.checkEd = false;
          this.$emit('checks', this.checkEd)
          return
        }
        if(!this.agreementOk && !this.privacyOk) return this.$u.toast('您还没有同意《用户协议》和 《隐私协议》');
        if(!this.agreementOk) return this.$u.toast('您还没有同意《用户协议》');
        if(!this.privacyOk) this.$u.toast('您还没有《隐私协议》');
        this.checkEd = true;
        this.$emit('checks', this.checkEd)
      },
      myshowToast(msg) {
				this.$refs.uToast.show({
					title: msg,
					type: 'error',
          position:'top'
				})
			},
      
    }
    
	}
</script>

<style lang="scss" scoped>		
	.privacy-box{ position: absolute; bottom: 0; width: 100%; left: 0; height: 120rpx; display: flex; align-items: center; justify-content: center; }
  .pup{ position: relative;
    width: 690rpx; margin: 0 auto; background-color: #fff; height: calc(100vh - 250rpx); overflow: hidden; border-radius: 8rpx; 
    .div{padding: 0 20rpx;  height: calc(100vh - 500rpx); margin-top: 80rpx; overflow-y: auto; margin-bottom: 40rpx;}
  }
  .btns{
    display: flex; align-items: center; justify-content: space-between; padding:0 30rpx 40rpx;
    .btn{width: 48%; height: 80rpx; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; background-color: #f1f1f1;}
    .btn1{background-color: #2979ff; color: #ffff;}
  }
  .t{color: #2979ff;}
  .texts{position: relative;}
  .bg{display: flex;align-items: center; justify-content: center;}
  .icon{width: 34rpx; height: 34rpx; border: 1px solid #ddd; border-radius: 8rpx; display: flex;align-items: center; justify-content: center; overflow: hidden; margin-right: 10rpx; font-size: 24rpx;
    &.on{background-color: rgb(21, 21, 21); border-color: rgb(21, 21, 21); color: #ffff;}
  }
  .pup-box{
    position: fixed; width: 100%; height: 100%; left: 0; top:0; z-index: 99999; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
  }
  .close{
    position: absolute; right: 0; top: 0; width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center;
  }
</style>